<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/8/17
  Time: 15:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <base href="${pageContext.request.contextPath}/">
    <title>提交订单</title>
    <link rel="stylesheet" href="css/bootstrapcss/bootstrap.css">
    <link rel="stylesheet" href="css/front/header.css">
    <!-- Font Awesome -->
    <link href="css/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <script src="js/jquery-2.2.4.js"></script>
    <script src="js/bootstrap.js"></script>
    <style>
        .order-top{
            width: 100%;
            height: 50px;
            background-color: gainsboro;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="clearfix">
            <div class="col-md-10 col-md-offset-1">
                <jsp:include page="header.jsp"/>


                <div class="row">
                    <div class="col-md-10 column" >
                        <div style="padding-left: 300px">
                        <h3>请填写你的订单信息 </h3>
                            <form action="front/tra/order.do" method="post" style="margin-top: 20px">
                                <input type="hidden" name="buyer" value="${sessionScope.loginUser.userId}">
                                <input type="hidden" name="totalMoney" value="${param.totalMoney}">
                                <input type="hidden" name="totalCount" value="${param.totalCount}">
                                收&nbsp;&nbsp;货&nbsp;&nbsp;人：<input type="text" name="receiver" required>
                                <br><br>
                                收货地址：
                                省份：
                                <select name="provinces" id="province" onchange="changeProvince(this)" required>
                                    <option value="">--请选择--</option>>
                                </select>
                                城市：
                                <select name="city" id="city" onchange="changeCity(this)"></select>
                                县市：
                                <select name="county" id="county"></select>
                                <br><br>
                                联系电话：<input type="text" name="phone" required>
                                <input type="hidden" name="mark" value="1">
                                <br><br>
                                详细收货地址：<input type="text" name="trdLoc" required>
                                <br>
                                <br>
                                <input type="submit">
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
                <jsp:include page="footer.jsp"/>
</div>




<script src="js/front-js/carts.js"></script>
<script>

    function getpvalues() {

    }

    var provinces = [{
        id: 100,
        name: '广东',
        cities: [{
            id: 1001,
            name: '广州',
            county: [{id: 10010,name:'越秀区'},
                {id: 10011,name:'东山区'},
                {id: 10012,name:'海珠区'},
                {id: 10013,name:'荔湾区'}
            ]},
            {
             id: 1002,
             name: '深圳',
             county:[{id:10020,name:'福田区'},
                 {id:10021,name:'罗湖区'},
                 {id:10022,name:'宝安区'}

             ]},
            {
             id: 1003,
             name: '佛山',
             county:[{id:10030,name:'禅城区'},
                 {id:10031,name:'南海区'},
                 {id:10032,name:'顺德区'}

             ]}
        ]
    },
        {
            id: 101,
            name: '广西',
            cities: [
                {id: 1011,
                 name: '南宁',
                 county:[{id:10110,name:'兴宁区'},
                     {id:10111,name:'青秀区'},
                     {id:10112,name:'江南区'}
                 ]},
                {id: 1013,
                 name: '桂林',
                 county:[{id:10130,name:'雁山区'},
                     {id:10131,name:'秀峰区'},
                     {id:10132,name:'七星区'},
                 ]},
                {id: 1014,
                 name: '柳州',
                 county:[{id:10140,name:'鱼峰区'},
                     {id:10140,name:'柳南区'},
                     {id:10140,name:'柳北区'}
                 ]}
            ]
        },

    ]

    function initProbent() {
        for (var i=0;i<provinces.length;i++) {
            var province=provinces[i];

            var provinceEle=document.getElementById("province");

            var opton=new Option(province.name,province.id);

            provinceEle.options.add(opton);
        }

    }
    function changeProvince(ele) {
        var cityEle= document.getElementById("city");
        var countyEle= document.getElementById("county");
        //清除上一次加入的城市列表
        cityEle.options.length=0;
        countyEle.options.length=0;
        //先获得选中省份的值，即option的value
        /*  ele.options[ele.selectedIndex].value;
          console.log(  ele.options[ele.selectedIndex].value);*/
        var  provinceId= ele.options[ele.selectedIndex].value;
        for(var i=0;i<provinces.length;i++){
            if(provinces[i].id == provinceId){
                var cities=provinces[i].cities;
                for(var j=0;j<cities.length;j++){
                    /*console.log(cities[j].name);*/
                    var opt=new Option(cities[j].name,cities[j].id);
                    cityEle.options.add(opt);
                }
            }
        }
    }
    function changeCity(ele) {
        var countyEle= document.getElementById("county");
        //清除上一次加入的城市列表
        countyEle.options.length=0;
        //获得选中城市的值
        /*console.log('下标%d:',ele.selectedIndex);*/
        var cityId = ele.options[ele.selectedIndex].value;
        /*console.log(cityId)*/
        /*console.log(provinces[1].cities.length);*/
        for (var k=0;k<provinces.length;k++){
            /*console.log("sas",provinces[k].cities.length)*/
            for (var x=0;x<provinces[k].cities.length;x++){
               /*console.log( provinces[k].cities[x].id)*/
                if (provinces[k].cities[x].id == cityId) {
                    var countys = provinces[k].cities[x].county;
                    /*console.log(countys)*/
                    /*console.log(countys.length)*/
                    for(var j=0;j<countys.length;j++){
                        /*console.log(countys[j].name)*/
                        var opt=new Option(countys[j].name,countys[j].id);
                        countyEle.options.add(opt);
                    }
                }
            }
        }

    }
    initProbent();
</script>

</body>
</html>
